<template>
  <div class="recommend">
    <div class="banner">
      <img src="../assets/activity.png"
           alt="">
    </div>
    <div class="invite">
      <div class="invite_style">
        <img src="../assets/weixin.png"
             alt="">
        <p>邀请微信好友</p>
      </div>
      <div class="invite_style">
        <img src="../assets/QQ.png"
             alt="">
        <p>邀请QQ好友</p>
      </div>
      <div class="invite_style">
        <img src="../assets/mianduimian.png"
             alt="">
        <p>面对面邀请</p>
      </div>
    </div>
    <div class="invite_num">
      <div class="num_style">
        <p>累计收益</p>
        <p>0元</p>
      </div>
      <div class="num_style">
        <p>成功邀请</p>
        <p>0人</p>
      </div>
    </div>
    <p>-收益明细-</p>
    <div class="tips">
      <img src="../assets/hongbao.png"
           alt="">
      <p>还不赶紧去邀请好友</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Recommend'
}
</script>

<style lang="less">
body {
  background-color: #f5f5f5;
}
.recommend {
  .banner {
    margin-bottom: 5px;
    img {
      width: 100%;
    }
  }

  .invite {
    display: flex;
    background-color: #fff;
    padding: 23px 0;
    .invite_style {
      flex: 1;
      text-align: center;
      img {
        width: 58px;
        height: 58px;
      }
      p {
        font-size: 12px;
        color: #333;
      }
    }
  }

  .invite_num {
    display: flex;
    margin-top: 15px;
    margin-bottom: 20px;
    font-size: 12px;
    color: #666;
    .num_style {
      flex: 1;
      text-align: center;
      border-right: 0.1px solid #ddd;
    }
  }

  p {
    font-size: 12px;
    color: #666;
    text-align: center;
  }

  .tips {
    text-align: center;
    margin-top: 20px;
    img {
      width: 30px;
      height: 37px;
      color: #999;
    }
    p {
      color: #999;
    }
  }
}
</style>